<template>
	<view :class="['page',{'iphoneX':isIphoneX}]">
		<c-header>
			<view class="header" slot="header">				
				<view class="title">需求清单</view>				
			</view>
		</c-header>
		<view class="h45">
			<view class="fix-wrap">
				<view class="search-area">
					<view class="search-form">
						<view class="icon iconfont f-s44">&#xe622;</view>
						<input type="text" v-model="params.keyword" class="sc-inp" @confirm="search">
						<view v-if="params.keyword" class="clear-btn iconfont f-s44" @click="clearKeyword">&#xe724;</view>
					</view> 
					<view class="search-page">
						<view class="btn iconfont f-s40" @click="isShowSearch=true">&#xe6e9;</view>
						<view class="mask" v-if="isShowSearch" :style="{'height': 'calc(100% - '+(systemInfo.safeArea.top+90)+'px','top':(systemInfo.safeArea.top+44)+'px'}">
							<view class="search-body a-fadeinR">
								<view class="content-wrap">
									<view class="search-grid"> 
										<view class="label">状态</view>
										<view class="search-content status-list">
											<view :class="['item',{'active':params.status=='-1'}]" @click="params.status=-1">全部</view>
											<view :class="['item',{'active':params.status==0}]" @click="params.status=0">待接受</view>
											<view :class="['item',{'active':params.status==1}]" @click="params.status=1">生产中</view>
											<view :class="['item',{'active':params.status==2}]" @click="params.status=2">完成</view>
											<view :class="['item',{'active':params.status==3}]" @click="params.status=3">无效</view> 
											<view :class="['item',{'active':params.status==5}]" @click="params.status=5">审批中</view>
										</view>
									</view>	
									<!-- <view class="search-grid">
										<view class="label">申请人</view>
										<view class="search-content status-list">
											<view :class="['item',{'active':params.status=='-1'}]" v-for="(item,index) in users" :key="index" @click="delfilteruser(index)">{{item.username}}<view class="iconfont f-red">&#xe724;</view></view>
											<navigator :url="'/package_msg/mailUser/mailUser?scene=8&type=2&select_data='+params.user_ids.join(',')" hover-class="none" class="item" >添加</navigator>
										</view>
									</view>		 
									<view class="search-grid">
										<view class="label">采购单位</view>
										<view class="search-content status-list company-list"> 
											<view :class="['item',{'active':item.checked}]" v-for="(item,index) in company_list" :key="index" @click="setcompanys(index)">{{item.label}}</view>										 
										</view> 
									</view>
									<view class="search-grid">
										<view class="label">紧急程度</view>
										<view class="search-content status-list">  
											<view :class="['item',{'active':params.level==item.id}]" v-for="(item,index) in level" :key="index" @click="setlevel(index)">{{item.label}}</view>										 
										</view> 
									</view>
									<view class="search-grid">
										<view class="label">类型</view>
										<view class="search-content status-list"> 
											<view :class="['item',{'active':params.type==item.id}]" v-for="(item,index) in type" :key="index" @click="settype(index)">{{item.label}}</view>										 
										</view> 
									</view>
									<view class="search-grid">
										<view class="label">采购部门</view>
										<view class="search-content status-list"> 
											<view :class="['item',{'active':item.checked}]" v-for="(item,index) in deps" :key="index" @click="setdeps(index)">{{item.name}}</view>											 
										</view> 
									</view> 
									<view class="search-grid">
										<view class="label">采购时间</view>
										<view class="search-content">
											<view class="date-bar">
												<picker mode="date" class="date" @change="changeDate(1,$event)">
													<input type="text" v-model="params.start_time" disabled placeholder="开始时间"> 
												</picker>
												<view class="line">~</view>
												<picker mode="date" class="date" @change="changeDate(2,$event)">
													<input type="text" v-model="params.end_time" disabled placeholder="结束时间"> 
												</picker>
											</view>
										</view>
									</view> -->
									<!-- <view class="search-grid">
										<view class="label">是否逾期</view>
										<view class="search-content">
											<view class="switch"> 
												<switch color="#3399FF" style="transform: scale(0.7);" @change="selectYq"></switch> 				 
											</view>		 
										</view>
									</view> -->
								</view>
								<view class="btn-bar">
									<view class="cancle" @click="isShowSearch=false">取消</view>
									<view class="confirm" @click="search">查询</view>
								</view>
							</view>
						</view>
					</view>
				</view> 			 
			</view>
		</view>
		<view v-if="isLogin" class="body">
			<c-loading v-if="loadingState.default" :loadingState="loadingState"></c-loading>
			
			<template v-else>		
				
				<template v-if="isNotAuth">
					<c-empty msg="无设备需求权"></c-empty>
				</template>
				
				<template v-else>
					<template v-if="list.length>0">
						<view v-if="userInfo.id==19||userInfo.id==21||userInfo.id==20||userInfo.id==23" class="project-list-2">
							<!-- 超级管理员 -->
							<template>								
								<view class="item m-b2" v-for="(item,index) in list" :key="index">
									<view class="hd">
										<view class="title">
											<view class="name f-s32 f-wb">{{item.lag_time?'变更订单':'新需求订单'}}{{item.status}}</view> 
											<view class="status"> 
												<!-- <text v-if="item.status==0" class="orange">待接受</text> -->
												<text v-if="item.status==1" class="blue">已读</text>									 
												<!-- <text v-if="item.status==2" class="blue">完成</text>
												<text v-if="item.status==3" class="blue">无效</text> 		 -->
											</view>
										</view>
										<!-- <view class="date">{{item.create_time}}</view> -->
									</view> 
									<navigator :url="'/package_shengchan/detail/detail?id='+item.id" hover-class="none" class="content"> 
										<view class="row-2 m-b1">
											<view class="s-item">
												<view class="label">订单编号：</view>
												<view class="val">{{item.number}}</view>
											</view> 
										</view>
										<view class="row-2 m-b1">
											<view class="s-item">
												<view class="label">交货时间：</view>
												<view class="val">{{item.lag_time?item.lag_time:item.delivery_time}}</view>
											</view> 
										</view>
										<view class="row-2 m-b1">
											<view class="s-item">
												<view class="label">提交人：</view>
												<view class="val">{{item.create_name}}</view>
											</view> 
										</view> 												 
									</navigator>
									<view class="bottom">
										<view v-if="item.new_data.id" class="left">	
											<template >
												<view class="order-info">
													<view class="f-s30 f-wb m-b1">现订单</view>
													<view v-for="(subitem,subindex) in item.new_data.devlist" :key="subindex" style="padding:20rpx 0;border-bottom: 1rpx solid #ddd;">
														<view class="m-b1 f-s28">产品名称:{{subitem.device_name}}</view>
														<!-- <view class="m-b1 f-s28">产品规格:个</view> -->
														<view class="f-s28">数量:{{subitem.num}}</view>
													</view>
												</view>										 
											</template>
										</view>
										<view class="right">
											<view class="order-info">
												<view class="f-s30 f-wb m-b1">{{item.new_data.id?'原订单':'现订单'}}</view>
												<view v-for="(subitem,subindex) in item.devlist" :key="subindex" style="padding:20rpx 0;border-bottom: 1rpx solid #ddd;">
													<view class="m-b1 f-s28">产品名称:{{subitem.device_name}}</view>
													<!-- <view class="m-b1 f-s28">产品规格:个</view> -->
													<view class="f-s28">数量:{{subitem.num}}</view>
												</view>
											</view>
											
										</view>
									</view> 
									<view class="btn-wrap">
										<template v-if="item.lag_time">
											<template v-if="item.status!=2&&userInfo.id==item.user_id">
												<view class="btn blue">
												 	<template>需求变更</template> 
												</view> 
											</template>
											<template v-if="item.status==4&&item.lag_time&&userInfo.id==23">
												<view class="btn blue" @click="lagTime(1,index)">
												 	<template>申请延期</template> 
												</view> 
												<view class="btn blue">
												 	<template>确认需求</template> 
												</view> 
											</template>
										</template>
										<template v-else>
											<template v-if="item.status==1&&(userInfo.id==23)">
												<view class="btn blue" @click="showPopup('show','isDisagree');currentIndex=index">
												 	<template>拒绝</template> 
												</view>
												<view class="btn blue" @click="confirmOrder(2,index,2)">
												 	<template>完成</template> 
												</view>
												<view class="btn blue" @click="lagTime(1,index)">
												 	<template>申请延期</template> 
												</view> 
											</template>
											<template v-if="item.status==4&&(userInfo.id==23)">
												<view class="btn blue" @click="confirmOrder(1,index,1)">
												 	<template>确认需求</template> 
												</view> 
												<view class="btn blue" @click="lagTime(1,index)">
												 	<template>申请延期</template> 
												</view> 										
											</template>									
										</template> 
										<template v-if="item.status==5&&(userInfo.id==19||userInfo.id==21||userInfo.id==20)">
											<view class="btn blue" @click="shenpi(index)">
											 	<template>审批</template> 
											</view>
										</template> 
										<template v-if="item.status==2&&(userInfo.id==23)">
											<view class="btn blue" >
											 	<template>已完成</template> 
											</view>
										</template>  
									</view>
								</view>
								
							</template>
							
							<c-loading :loadingState="loadingState"></c-loading>
						</view>
						
						<view v-else class="project-list">
							<!-- 超级管理员 -->
							<template>
								<view class="item m-b2" v-for="(item,index) in list" :key="index">
									<view class="hd">
										<view class="title">
											<view class="name f-s28">{{item.create_time}}</view> 
											<view class="status"> 
												<text v-if="item.status==0" class="orange">待接受</text>
												<text v-if="item.status==1" class="blue">生产中</text>									 
												<text v-if="item.status==2" class="blue">完成</text>
												<text v-if="item.status==3" class="blue">无效</text> 
												<text v-if="item.status==5" class="blue">审核中</text> 		
											</view>
										</view>
										<!-- <view class="date">{{item.create_time}}</view> -->
									</view> 
									<navigator :url="'/package_shengchan/detail/detail?id='+item.id" hover-class="none" class="content"> 
										<view class="row-2">
											<view class="s-item">
												<view class="label">订单号：</view>
												<view class="val">{{item.number}}</view>
											</view> 
										</view>
										<view class="row-2" v-for="(subitem,subindex) in item.devlist" :key="subindex">
											<view class="s-item" >
												<view class="label">设备名称：</view>
												<view class="val">{{subitem.device_name||''}}</view>
											</view> 
											<view class="s-item">
												<view class="label">数 量：</view>
												<view class="val">{{subitem.num||''}}</view>
											</view>
										</view>
										<view class="row-2">
											<view class="s-item">
												<view class="label">交货时间：</view>
												<view class="val">{{item.lag_time?item.lag_time:item.delivery_time}}</view>
											</view> 
										</view> 												 
									</navigator>
									<view class="bottom">
										<view class="left">	</view>
										<view class="right">									 		
											<!-- <view class="btn red" @click="del(item.id)">删除</view> -->
											<navigator v-if="item.user_id==userInfo.id&&(item.status==0||item.status==1)" :url="'/package_shengchan/form/form?type=edit&id='+item.id" hover-class="none" class="btn orange" >变更需求</navigator>									 
										</view>
									</view> 
								</view>
								
							</template>
							
							<c-loading :loadingState="loadingState"></c-loading>
						</view>
					</template>
					
					<template v-else>
						<c-empty></c-empty> 
						<navigator url="/package_shengchan/dev_list/dev_list?page=list" hover-class="none" class="add-btn m-b2">管理设备</navigator>
						<navigator url="/package_shengchan/form/form?type=add" hover-class="none" class="add-btn add-btn-2">添加需求</navigator> 
					</template>
					
				</template>
			</template>
			 
		</view>
		
		<view v-if="list.length>0" class="add-btn-bar">
			<view class="fix-wrap">
				<navigator url="/package_shengchan/dev_list/dev_list?page=list" hover-class="none" class="btn m-b2">管理设备</navigator>
				<navigator url="/package_shengchan/form/form?type=add" hover-class="none" class="btn btn-2">添加需求</navigator> 
			</view>
		</view>
		
		<view v-if="flag.isFullPage" class="full-fix-page">
			<!-- 申请延期 -->
			<view v-if="flag.isSetDate" class="popup-wrap a-fadein">
				<view class="popup-type-model">
					<view class="close-btn iconfont f-s44" @click="showPopup('hide')">&#xeb6a;</view>
					<view class="popup-body">
						<view class="title">申请延期</view>
						<view class="content">  
							<u--form :model="params" ref="uForm" class="form-wrap">
								<u-form-item label="延期日期" labelWidth="160" prop="name" borderBottom="true" class="u-form-item" @click="flag.isShowDate=true"> 
									<u-input v-model="params.lag_time" placeholder="选择延期日期" disabled disabledColor="#ffffff" border="none" style="pointer-events: none;"/>
									<u-icon	slot="right" name="arrow-right"></u-icon>		 
								</u-form-item> 					 				
							</u--form> 
							<u-button type="primary" size="mini" :hairline="true" text="确定" style="height: 70rpx;font-size: 30rpx;" @click="submit"></u-button>
						</view>
					</view>
				</view>
			</view>  
			
			<!-- 拒绝 -->
			<view v-if="flag.isDisagree" class="popup-wrap a-fadein">
				<view class="popup-type-model">
					<view class="close-btn iconfont f-s44" @click="showPopup('hide')">&#xeb6a;</view>
					<view class="popup-body">
						<view class="title">拒绝</view>
						<view class="content">  
							<u--form :model="params" ref="uForm" class="form-wrap">
								 
								<u-form-item label="拒绝原因" labelWidth="160" prop="name" borderBottom="true" class="u-form-item">
									<u-input v-model="params.opt_remark" placeholder="输入拒绝原因" /> 	 
								</u-form-item>								
							</u--form> 
							<u-button type="primary" size="mini" :hairline="true" text="确定" style="height: 70rpx;font-size: 30rpx;" @click="confirmOrder(3,currentIndex,3)"></u-button>
						</view>
					</view>
				</view>
			</view>  
		</view>
		
		<u-calendar mode="single" :show="flag.isShowDate" @confirm="confirmDate" @close="flag.isShowDate=false" :defaultDate="defaultDate" :minDate="minDate"></u-calendar>
		
		<c-nav-shengchan :switchTab="3"></c-nav-shengchan>
		  
	</view>
</template>

<script> 
		 
	export default {
		data() {
			return {
				isLogin:false,
				userInfo:uni.getStorageSync('userInfo'),
				systemInfo:getApp().globalData.systemInfo,
				isIphoneX:getApp().globalData.isIphoneX,
				loadingState:{
					default:true,
					loading:false,
					completed:false
				},
				list:[], 
				type:'-1',
				warn_level:'',
				isShowSearch:false,
				currentIndex:'',
				params:{ 
					device_id:'',					 
					status: '-1',
					lag_time:'',					 
					page:1,
					limit:15,
					opt_remark:''
				},
				flag: {
					isFullPage: false,
					isSetDate: false, 
					isShowDate:false,
					isDisagree:false
				
				},  
				isStop:true, 
				isNotAuth:false,
				defaultDate:[],
				minDate:''
			}
		},
		async onLoad(params) { 
			this.isLogin=await this.$loginState('check');  
			 
			if(this.isLogin){ 
				this.getList();   
			}
		},
		onShow() {
			 
		},
		onReachBottom(){
			if(this.loadingState.completed){ 
				this.params.page=1;
				return false
			}else{
				if(this.list.length<this.total&&this.list.length>0){
					this.params.page++; 
					this.getList(); 
				} 
			}	 
		},
		methods: { 
			async shenpi(idx){
				console.log(idx)
				// let res=await this.$api.user_api.devneedchangestatusal({
				// 	id
				// })
			},
			
			// 切换类型
			changeType(type){
				this.params.status=type;
				this.loadingState={
					default:true,
					loading:false,
					completed:false
				};
				this.list=[];
				this.params.page=1;
				this.getList();
			},
			  
			async getList() {  
				let {device_id,status,page,limit}=this.params;
				let res = await this.$api.user_api.devneedlist({ 
					page,
					limit,
					device_id,
					status, 					
				});    
				console.log(res)
				if (res.data.code == 200) { 
					this.loadingState.default=false;					 
					this.total = res.data.data.count;  
					this.isNotAuth=false;
					if(this.userInfo.id==23){ 
						let ids=[];
						res.data.data.list.forEach(item=>{
							if(item.status==0){
								ids.push(item.id)
							}						
						})
						if(ids.length>0){
							this.devneedchangestatusal(ids);
						}						
					}					
					this.list =this.list.concat(res.data.data.list);  
					if(this.list.length<res.data.data.count){
						// this.loadingState.loading=true;
					}else{
						// this.loadingState.loading=false;
						this.loadingState.completed=true;
					}					
				} else {
					this.loadingState.default=false;
					this.isNotAuth=true;
					uni.showToast({
						icon:'none',
						title:res.data.msg,
						mask:true
					})
				} 				
			},
			
			async confirmOrder(type,idx,status){
				let _this=this;
				let item=this.list[idx];
				let msg='';
				if(type==1){
					msg='确认需求吗？'
				}
				if(type==2){
					msg='确认完成吗？'
				} 
				if(type==3){
					if(this.params.opt_remark==''){
						uni.showToast({
							icon:'none',
							title:'请输入拒绝原因',
							mask:true
						})
						return
					}		
					let d_res=await _this.$api.user_api.devneedchangestatusal({
						id:item.id,
						status:status,
						opt_remark:this.params.opt_remark
					}) 
					if(d_res.data.code==200){
						_this.list[idx].status=status;
						this.showPopup('hide');
					}
				}else{
					uni.showModal({
						content:msg,
						async success(res) {
							if(res.confirm){
								let d_res=await _this.$api.user_api.devneedchangestatusal({
									id:item.id,
									status:status
								}) 
								if(d_res.data.code==200){
									_this.list[idx].status=status;
								}
							}
						}
					})
				}
				
				
			},
			
			
			async devneedchangestatusal(ids){
				console.log(ids)
				let res=await this.$api.user_api.devneedchangestatusal({
					id:ids,
					status:1
				})
				if(res.data.code==200){
					this.list.forEach(item=>{
						item.status=1;
					})
				}
				console.log('修改状态',res)
			},
		
			lagTime(type,idx){				
				let item=this.list[idx]; 
				this.currentIndex=idx;
				this.params.lag_time=item.lag_time?item.lag_time:item.delivery_time;	 
				let currentDate=this.params.lag_time.split(' ')[0];
				if(currentDate[8]==0){
					currentDate=currentDate.substr(0,7)+currentDate.substr(9,1);
				} 
				this.minDate=currentDate;
				this.defaultDate.push(this.minDate); 
				this.showPopup('show','isSetDate');
			},
			
			confirmDate(e){
				this.params.lag_time=e[0];
				this.flag.isShowDate=false;				
			},
			
			// 搜索关键词
			search() {
				this.isShowSearch=false;
				this.list = [];
				this.loadingState={
					default:true,
					loading:false,
					completed:false
				};
				this.params.page=1;
				this.getList();
			},
			
			 
			async submit(){
				let _this=this;   
				
				if(this.isStop){
					this.isStop=false; 
					console.log({
						id:this.list[this.currentIndex].id,
						status:5,
						lag_time:this.params.lag_time, 
						type:1,
					})
					let res = await this.$api.user_api.devneededit({
						id:this.list[this.currentIndex].id,
						status:5,
						lag_time:this.params.lag_time, 
						type:1,
					}); 
					 console.log(res)
					if (res.data.code == 200) {
						this.$showToast({
							icon:'success',
							title:'延期成功',
							duration:1000,
						}).then(()=>{
							this.list = [];
							this.getList();
							this.showPopup('hide');
						})
						this.isStop=true; 
					} else {
						this.$showToast({
							icon:'error',
							title:res.data.msg,
						}) 
						this.isStop=true; 
					} 
					
				}
				
			},
			
			// 清空关键词
			clearKeyword() {
				this.params.project_name = '';
				this.params.page=1;
				this.loadingState={
					default:true,
					loading:false,
					completed:false
				};
				this.list = [];
				this.getList();
			},
			
			// 打开弹窗
			showPopup(t, n) { 
				if (t == 'show') {
					this.flag.isFullPage = true;
					this.flag[n] = true;
				} else if (t == 'hide') {
					for (let i in this.flag) {
						this.flag[i] = false;
					}
				}
			},
			 
			async del(id){
				let res=await this.$api.user_api.devneededit({
					id:id
				})  
				console.log(id,res)
				if(res.data.code==200){
					this.loadingState={
						default:true,
						loading:false,
						completed:false
					};
					this.list = [];
					this.getList();
				}
			} 
		
		},
		computed:{ 
			list_update(){
				return this.$store.state.xq_update
			} 
		},
		watch:{
			list_update(newer,older){  
				if(newer!=older){ 
					this.loadingState={
						default:true,
						loading:false,
						completed:false
					};
					this.params.page=1;
					this.list=[];
					this.getList(); 
				}
			}
			 
		}
		
	}
</script>

<style lang="less">
	.total{
		margin:0 30rpx 0;
		font-size: 30rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.add-btn-bar{
		height: 50px; 
		.fix-wrap{
			display: flex;
			justify-content: space-around;
			left:0;
			bottom:50px;
			height: 50px; 
			background: #fff;
		}
		.btn{
			width: 46%;
			height: 36px;
			line-height: 36px;
			margin-top: 7px;
			background: #fff;
			border: 1rpx solid #409DFE;
			font-size: 32rpx;
			color: #409DFE;
			text-align: center;
			border-radius: 18rpx;
		}
		.btn-2{
			background: #409DFE;
			color: #fff;
		}
	}
	.add-btn{
		margin: 0 40rpx;
		height: 80rpx;
		line-height: 80rpx;
		background: #409DFE;
		border: 1rpx solid #409DFE;
		background: #fff;
		border-radius: 18rpx;
		text-align: center;
		font-size: 30rpx;
		color: #409DFE;
	}
	.add-btn-2{
		background: #409DFE;
		color: #fff;
	}
	.project-list{
		padding-top:20rpx;
		.item{
			padding:0 20rpx;
			margin: 0 30rpx;
			background: #fff; 
			border-radius: 15rpx;
			font-size: 30rpx;
			.hd{
				padding:15rpx 0;
				border-bottom: 1rpx solid #eee;		
			}
			.date{
				color:#999;
				font-size: 24rpx;
			}
			.title {
				display: flex;
				justify-content: space-between;
				align-items: center;						
				.name{
					margin-right: 10rpx;
					font-size: 30rpx;
				}
				.status{
					flex-shrink: 0;
					text{
						border-radius: 5rpx;
						padding:2rpx 5rpx;
					}
				}
				.blue{
					border:1rpx solid #09f;
					color:#09f;
				}
				.red{
					border:1rpx solid #f00;
					color:#f00;
				}
				.grey{
					border:1rpx solid #ccc;
					color:#ccc;
				}
				.orange{
					border:1rpx solid #ff9600;
					color:#ff9600;
				}
				.green{
					border:1rpx solid green;
					color:green;
				}
			}
			.content{
				position: relative;
				padding:20rpx 0 0;
				.finish-icon{
					position: absolute;
					right:0;
					top:0;
					width:180rpx;
					image{
						width: 100%;
					}
				}
				.row-2{
					display: flex;
					justify-content: space-between;
				}
				.s-item{
					display: flex;
					align-items: center;
					margin-bottom: 20rpx;
					font-size: 30rpx;
					color:#666;
					.label{
						width: 150rpx;
						flex-shrink: 0;
					}
					.val{
						display: flex;
						align-items: center;
						flex-grow: 2;
					}
				}
				.progress{
					position: relative;
					height:10rpx;
					width: 60%;
					margin-right: 20rpx;
					border-radius: 15rpx;
					background: #ccc;
					.kd{
						position: absolute;
						left:0;
						top:0;
						height:10rpx;
						border-radius: 15rpx;
						background: #09f;
					}
				}
				.progress-data{
					font-size: 28rpx;
				}				
			}
			.bottom{
				display: flex;
				justify-content: space-between;
				// padding:20rpx 0;
				margin-top: 10rpx;
				border-top: 1rpx solid #eee;
				.left{
					display: flex;
					.btn{
						margin-right: 20rpx;
					}
				}
				.right{
					display: flex;
					justify-content: flex-end;
					.btn{
						margin-left: 20rpx; 
					}
				}
				.btn{ 
					padding:0 10rpx;
					margin: 20rpx 0;
					border-radius: 10rpx;
					font-size: 28rpx;
					color:#fff;
				}
				.blue{
					background:#09f; 
				}
				.red{
					background:#f00; 
				}
				.grey{
					background:#ccc; 
				}
				.yello{
					background:#00ff00;
				}
				.green{
					background:#00aa00;
				}
				.orange{
					background: #ff9600;
				}
			}
		}
	} 
	
	.project-list-2{
		padding-top:20rpx;
		.item{
			padding:0 20rpx;
			margin: 0 30rpx;
			background: #fff; 
			border-radius: 15rpx;
			.hd{
				padding:15rpx 0; 	
			}
			.date{
				color:#999;
				font-size: 24rpx;
			}
			.title {
				display: flex;
				justify-content: space-between;
				align-items: center;						
				.name{
					margin-right: 10rpx;
					font-size: 30rpx;
				}
				.status{
					flex-shrink: 0;
					text{
						border-radius: 5rpx;
						padding:2rpx 5rpx;
						font-size: 28rpx;
					}
				}
				.blue{ 
					color:#09f;
				}
				.red{
					border:1rpx solid #f00;
					color:#f00;
				}
				.grey{
					border:1rpx solid #ccc;
					color:#ccc;
				}
				.orange{
					border:1rpx solid #ff9600;
					color:#ff9600;
				}
				.green{
					border:1rpx solid green;
					color:green;
				}
			}
			.content{
				position: relative;
				padding:20rpx 0 0;
				.finish-icon{
					position: absolute;
					right:0;
					top:0;
					width:180rpx;
					image{
						width: 100%;
					}
				}
				.row-2{
					display: flex;
					justify-content: space-between;
				}
				.s-item{
					display: flex;
					align-items: center;
					margin-bottom: 10rpx;
					font-size: 28rpx;
					color:#333;
					.label{
						width: 240rpx;
						flex-shrink: 0;
					}
					.val{
						display: flex;
						align-items: center;
						flex-grow: 2;
					}
				}
				.progress{
					position: relative;
					height:10rpx;
					width: 60%;
					margin-right: 20rpx;
					border-radius: 15rpx;
					background: #ccc;
					.kd{
						position: absolute;
						left:0;
						top:0;
						height:10rpx;
						border-radius: 15rpx;
						background: #09f;
					}
				}
				.progress-data{
					font-size: 28rpx;
				}				
			}
			.btn-wrap{
				display: flex; 
				.btn{
					width: 120rpx;
					height:60rpx;
					line-height: 60rpx;
					text-align: center;
					padding:0 10rpx;
					margin: 20rpx 10rpx;
					border-radius: 10rpx;
					font-size: 28rpx;
					color:#fff;
				}
				.blue{
					background:#09f; 
				}
				.blue-plant{
					border:2rpx solid #09f; 
					height:54rpx;
					line-height: 54rpx;
					color: #09f;
				}
				.red{
					background:#f00; 
				}
				.grey{
					background:#ccc; 
				}
				.yello{
					background:#00ff00;
				}
				.green{
					background:#00aa00;
				}
				.orange{
					background: #ff9600;
				}
			}
			.bottom{
				display: flex;
				justify-content: space-between;
				// padding:20rpx 0;
				padding: 30rpx 0 20rpx;
				margin-top: 10rpx;
				border-top: 1rpx solid #eee;
				.left{ 
					width: 48%;
					.btn{
						margin-right: 20rpx;
						
					}
				}
				.right{
					width: 48%; 
					.btn{
						margin-left: 20rpx; 
					}
				}
				.order-info{
					padding:20rpx;
					background: #F5F5F5;
					border-radius: 10rpx;
				}
				.btn{ 
					height:60rpx;
					line-height: 60rpx;
					text-align: center;
					padding:0 10rpx;
					margin: 20rpx 0;
					border-radius: 10rpx;
					font-size: 28rpx;
					color:#fff;
				}
				.blue{
					background:#09f; 
				}
				.blue-plant{
					border:2rpx solid #09f; 
					height:54rpx;
					line-height: 54rpx;
					color: #09f;
				}
				.red{
					background:#f00; 
				}
				.grey{
					background:#ccc; 
				}
				.yello{
					background:#00ff00;
				}
				.green{
					background:#00aa00;
				}
				.orange{
					background: #ff9600;
				}
			}
		}
	} 
	 
	.search-grid{ 
		padding:20rpx;
		.label{
			margin-bottom: 20rpx;
			font-size: 26rpx;
			font-weight: bold;
		}
	}
	.date-bar{
		display: flex;
		align-items: center;
		.date{
			border: 1rpx solid #eee;
			border-radius: 10rpx; 					
			input{
				height: 50rpx;
				line-height: 50rpx;	
				padding:0 10rpx;
				font-size: 24rpx;
			}
		}
		.line{
			margin: 0 20rpx;
		}
	}
	.status-list{
		display: flex;
		// justify-content: space-between;
		flex-wrap: wrap;
		.item{
			position: relative;
			width: 31%;
			padding:10rpx 0;
			margin-bottom: 20rpx;
			margin-right: 10rpx;
			text-align: center;
			background: #f5f5f5;
			border-radius: 38rpx;
			font-size: 24rpx;
			.iconfont{
				position: absolute;
				right: -10rpx;
				top:-10rpx;
			}
		}
		.active{
			background: #09f;
			color:#fff;
			font-weight: bold;
		}
	}
	.company-list{
		display: block;
		.item{
			width: 100%;
		}
	}
</style>
